<template>
  <div class="box flex-row al-c j-c">
    <div class="content flex-row j-sb">
      <img src="~@/assets/img/img1.png" alt="logo" class="logo">
      <div class="right flex-row j-c">
          <div class="input-box flex-row al-c">
            <input type="text" placeholder="请输入关键词">
            <i class="el-icon-search"></i>
          </div>
          <div class="icon-text flex-row al-c">
            <i class="el-icon-edit"></i>
            <span>申请会员</span>
          </div>
          <div class="login flex-row al-c">
              <div class="icon-text flex-row al-c">
                <i class="el-icon-user"></i>
                <span>登陆</span>
              </div>
              <div class="line-al"></div>
              <div class="icon-text flex-row al-c">
                <span>注册</span>
              </div>
          </div>
      </div>
    </div>
    
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Header extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '~@/assets/less/flex.less';
@import '~@/assets/less/reset.less';
.box{
  width:100%;
  height: 138px;
  background: #0050A5 url('~@/assets/img/img2.png')  no-repeat 100px 0;
  background-size: 491px 54px;
  .logo{
    width: 490px;
    cursor:pointer;
  }
  .login{
    margin-left: 50px;
  }
  .icon-text {
    color:#fff;
   .pointer;
   .hover;
    i{
      margin-right: 5px;
       font-size: 18px;
    }
    span{
      font-size: 16px;
    }
  }
  .input-box{
     .hover;
    .j-sb;
    width: 320px;
    height: 44px;
    padding:0 20px;
    background: #fff;
    border-radius: 5px;
    margin-right: 50px;
    input{
      height: 44px;
      width: 250px;
      font-size: 16px;
      // background: red;
    }
    i{
      color: #0050A5;
      font-weight: bold;
    }
  }
}
</style>
